<template>
  <!-- 规格弹窗 -->
  <su-popup :show="authType !== ''" round="10" :showClose="true" @close="closeAuthModal">
    <view class="login-wrap">
      <!-- 1. 账号密码登录 accountLogin -->
      登录
      <account-login
          v-if="authType === 'accountLogin'"
      />
    </view>
  </su-popup>
</template>

<script setup>
import sheep from '@/sheep';
import { computed, reactive, ref } from 'vue';
import AccountLogin from "@/sheep/components/s-auth-modal/components/account-login.vue";
import SuPopup from "@/sheep/ui/su-popup/su-popup.vue";
const show = ref(false);
const modalStore = sheep.$store('modal');
// 授权弹窗类型
const authType = computed(() => {
  return modalStore.auth;
});


const closeAuthModal = () => {
}

</script>

<style lang="scss" scoped>
@import './index.scss';

.shake {
  animation: shake 0.05s linear 4 alternate;
}

@keyframes shake {
  from {
    transform: translateX(-10rpx);
  }
  to {
    transform: translateX(10rpx);
  }
}

.register-box {
  position: relative;
  justify-content: center;

  .register-btn {
    color: #999999;
    font-size: 30rpx;
    font-weight: 500;
  }

  .register-title {
    color: #999999;
    font-size: 30rpx;
    font-weight: 400;
    margin-right: 24rpx;
  }

  .or-title {
    margin: 0 16rpx;
    color: #999999;
    font-size: 30rpx;
    font-weight: 400;
  }

  .login-btn {
    color: var(--ui-BG-Main);
    font-size: 30rpx;
    font-weight: 500;
  }

  .circle {
    position: absolute;
    right: 0rpx;
    top: 18rpx;
    width: 8rpx;
    height: 8rpx;
    border-radius: 8rpx;
    background: var(--ui-BG-Main);
  }
}

.safe-box {
  height: calc(constant(safe-area-inset-bottom) / 5 * 3);
  height: calc(env(safe-area-inset-bottom) / 5 * 3);
}

.tcp-text {
  color: var(--ui-BG-Main);
}

.agreement-text {
  color: #999999;
}
</style>
